<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="18">
          <el-form-item label="计划名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入计划名称" />
          </el-form-item>
          <el-form-item label="计划内容" prop="content">
            <el-input type="textarea" v-model="form.content" placeholder="请输入计划内容" />
          </el-form-item>
          <el-form-item label="计划负责人" prop="manager">
            <el-input v-model="form.manager" placeholder="请输入计划负责人" />
          </el-form-item>
          <el-form-item label="计划开始时间" prop="startTime">
            <el-date-picker
              v-model="form.startTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择计划开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="计划结束时间" prop="endTime">
            <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd" type="date" placeholder="选择计划结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'Recommend',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String || Number,
      default: null,
    },
    dataSource: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      open: false,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入计划内容', trigger: 'blur' }],
        manager: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择计划结束', trigger: 'change' }],
      },
    }
  },
  dicts: ['plan_status'],
  watch: {
    show: {
      handler(val) {
        this.open = val
      },
    },
    open: {
      handler(val) {
        this.reset()
        if (val) {
          this.title = this.dataSource.id ? '修改合同推进计划' : '添加合同推进计划'
          if (this.dataSource) {
            this.form = JSON.parse(JSON.stringify(this.dataSource))
          }
        } else {
          this.$emit('cancel', false)
        }
      },
    },
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        stageName: null,
        paymentCondition: null,
        paymentAmount: null,
        paymentPercentage: null,
        plannedPaymentDate: null,
        paymentStatus: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleAddMoreInfo() {},
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('save', { name: 'contractAdvancePlanList', data: JSON.parse(JSON.stringify(this.form)) })
        }
      })
    },
  },
}
</script>
